<template>
  <div class="main">
    <div class="outOneDiv">
      <div class="ssreWrap flex-h">
        <div class="top1">
          <headerBack></headerBack>
          <div class="stepImage" style="width: 7.5rem;height: 1.2rem;">
            <img src="~/static/images/step1.png" style="width:auto;height: 1.2rem;display: block;margin: 0 auto;" />
          </div>
        </div>
        <div class="top2 scrollerOneDiv">
          <div class="warnText">
            <span>“目标批次”必须选择自己高考位次所在的批次,错误的批次将影响填报结果,且无法更改。</span>
          </div>
          <div class="chooseSubject">
            <h2 class="chooseTitle">请勾选出选考科目</h2>
            <span @click="chooseSub(its, index)" class="chooseBox" v-for="(its, index) in subData" :key="index">
              <img class="subImg" :src="subArr.indexOf(its) === -1 ? choImg2 : choImg1" alt />
              <b class="sub1">{{ its }}</b>
            </span>
          </div>
          <div class="chooseArea">
            <div class="selectList">
              <div class="flex-h absBox">
                <b class="bb1">考生省份</b>
                <div class="flex1 xsp" @click="poves = true">
                  <span>{{ value1[0] }}</span>
                  <i class="poImg"></i>
                </div>
              </div>
              <div class="flex-h absBox">
                <b class="bb1">考生性别</b>
                <div class="flex1 xsp" @click="sexes = true">
                  <span class="sspx">{{ value2[0] }}</span>
                  <i class="poImg"></i>
                </div>
              </div>

              <div class="flex-h absBox">
                <b class="bb1">考生分数</b>
                <input class="xsp flex1 xspPadnone" v-on:blur="commonJs.blurAdjust" placeholder="请输入考生分数" v-model="studentScore" type="number" />
              </div>
              <div class="flex-h absBox">
                <b class="bb1">考生位次</b>
                <input class="xsp flex1 xspPadnone" v-on:blur="commonJs.blurAdjust" placeholder="请输入考生位次" v-model="studentOrder" type="number" />
              </div>
            </div>
          </div>
        </div>
        <div class="top3" :style="commonJs.checkTerminal() === 'ios' ? 'height: 2.2rem;' : ''">
          <div class="btnGroup">
            <button class="reset" @click="handleReset">重置</button>
            <button class="submit" @click="handleComfirm">下一步</button>
          </div>
        </div>
      </div>
      <popup-picker @on-change="changes2" :data="sexList" v-model="value2" show-name :show.sync="sexes" :columns="1"></popup-picker>

      <popup-picker :show.sync="poves" @on-change="changes" @on-hide="confimes" :data="cityList" :columns="1" v-model="provinceValue" show-name></popup-picker>
    </div>
  </div>
</template>

<script>
import { PopupPicker, Confirm, Toast } from 'vux'
import { saveExamineeZj } from '~/api/volunteer'
import headerBack from '~/components/headerBack'
import ls from 'store2'
export default {
  // 		 directives: {
  //     TransferDom
  //   },
  components: {
    PopupPicker,
    Confirm,
    Toast,
    headerBack
  },
  data() {
    return {
      provinceValue: ['浙江'],
      choImg1: require('~/static/images/search_icon_sure.png'),
      choImg2: require('~/static/images/icon_circle_n.png'),
      subIndex: null,
      subArr: [],
      subData: ['物理', '化学', '生物', '技术', '历史', '政治', '地理'],
      others: 'A+',
      otherScore: 6,

      subject: 'A+',
      subjectScore: 6,
      isJiang: false,
      sexes: false,
      picies: false,
      poves: false,
      xdalag: false,
      copus: '',
      cityList: ['浙江', '山东(等待开通)', '天津(等待开通)', '海南(等待开通)', '辽宁(等待开通)', '河北(等待开通)', '重庆(等待开通)', '江苏(等待开通)', '湖南(等待开通)', '湖北(等待开通)', '福建(等待开通)', '广东(等待开通)'],
      value1: ['浙江'],
      sexList: ['男', '女'],
      value2: ['请选择'],

      studentScore: '',
      studentOrder: ''
    }
  },
  mounted: function() {
    this.$visit(this.$route.path)
  },
  methods: {
    chooseSub(itsm, index) {
      if (this.subArr.indexOf(itsm) == -1) {
        if (this.subArr.length === 3) {
          this.$vux.toast.text('最多只能选择三个科目')
          return false
        }
        this.subArr.push(itsm)
        this.subIndex = index
      } else {
        this.subArr = this.subArr.filter(function(element, index) {
          return element != itsm
        })
      }
      let str = ''
      for (var i in this.subArr) {
        str += this.subArr[i] + '+'
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
      }
      this.resultSubjectStr = str
    },

    showuserAreas() {
      let userArea = '浙江'
    },
    changes(e) {
      // this.value1 = e;
    },
    confimes(e) {
      if (e) {
        if (this.provinceValue[0] === '浙江') {
          this.value1 = this.provinceValue
          this.poves = false
        } else {
          this.poves = true
        }
      } else {
        this.poves = false
      }
    },
    changes2(e) {
      this.value2 = e
    },

    subInfo(voms) {
      this.$loading('open')
      let obj = {
        precedence: this.studentOrder * 1,
        province: '浙江',
        score: this.studentScore * 1,
        sex: this.value2[0],
        userType: ls.get('userType'),
        subjects: this.resultSubjectStr
      }
      saveExamineeZj(obj)
        .then(res => {
          if (res.code === '0') {
            this.$vux.toast.text('保存信息成功')
            ls.set('stepOneData', obj)
            setTimeout(() => {
              this.commonJs.gosto('stepTwo', ls.get('userType'))
            }, 50)
          }
          if (res.code === '400') {
            this.$vux.toast.text(res.message)
          }
          this.$hideLoading()
        })
        .catch(() => {
          this.$vux.toast.text('网络错误，请稍后再试！')
          this.$hideLoading()
        })
    },
    handleReset() {
      this.studentScore = ''
      this.studentOrder = ''
      this.subArr = []
      this.value2 = ['请选择']
    },
    handleComfirm() {
      // 正式版判定
      if (this.subArr.length != 3) {
        this.$vux.toast.text('您需要选择三门科目')
      } else if (this.value2.length === 0 || this.value2[0] === '请选择') {
        this.$vux.toast.text('请选择您的性别')
      } else if (this.studentScore === '') {
        this.$vux.toast.text('考生分数未输入，请输入后进行下一步')
      } else if (this.studentOrder === '') {
        this.$vux.toast.text('考生位次未输入，请输入后进行下一步')
      } else {
        this.subInfo()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.weui-actionsheet__menu {
  /deep/.weui-actionsheet__cell {
    text-align: center;
  }
}
.ssreWrap {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  overflow: hidden;
  align-items: initial;
  justify-content: initial !important;
}

.outOneDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .scrollerOneDiv {
    padding: 0 0.3rem;
    width: 100%;
    .warnText {
      width: 100%;
      height: auto;
      background: #fff7d4;
      margin-top: 0.2rem;
      padding: 0.1rem 0.3rem;
      box-sizing: border-box;

      span {
        font-size: 0.22rem;
        color: #222;
        line-height: 0.3rem;
      }
    }
    .chooseSubject {
      width: 6.9rem;
      height: 2.7rem;
      margin: 0.2rem auto;
      box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
      border-radius: 0.1rem;
      overflow: hidden;
      padding: 0 0.3rem;
      box-sizing: border-box;

      .chooseTitle {
        height: 0.4rem;
        font-size: 0.26rem;
        font-family: 'PingFangSC-Semibold';
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        display: block;
        margin-top: 0.2rem;
        padding-left: 0.2rem;
        box-sizing: border-box;
      }

      .chooseBox {
        display: block;
        float: left;
        width: 25%;
        text-align: center;
        margin-top: 0.3rem;

        .subImg,
        .sub1 {
          display: inline-block;
          vertical-align: middle;
        }

        .subImg {
          width: 0.36rem;
          height: 0.36rem;
        }

        .sub1 {
          font-size: 0.3rem;
          font-family: 'PingFangSC-Semibold';
          font-weight: 600;
          color: rgba(34, 34, 34, 1);
          margin-left: 0.15rem;
        }
      }
    }

    .chooseArea {
      margin-top: 0.21rem;
      width: 100%;
      height: auto;
      // box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
      // border-radius: 0.1rem;
      position: relative;

      .gaizi {
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.2);
        z-index: 100;
      }

      .radio {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        padding: 0.61rem 1.59rem 0.4rem 1.58rem;

        li {
          display: flex;
          align-items: center;

          .text {
            margin-left: 0.2rem;
            font-size: 0.36rem;
            color: #222;
            font-weight: bold;
          }
        }
      }

      .selectList {
        padding: 0 0.3rem;
        flex: 1;
        box-sizing: border-box;

        .absBox {
          width: 6.3rem;
          height: 0.9rem;
          line-height: 0.9rem;

          .bb1 {
            color: #222222;
            font-size: 0.3rem;
            font-weight: bold;
            letter-spacing: 0.02rem;
          }

          .xsp {
            text-align: right;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.3rem;
            font-weight: bold;
            border: none;
            padding-right: 0.5rem;
            color: #222;
            box-sizing: border-box;
            outline: none;
            position: relative;

            span {
              font-size: 0.3rem;
              font-weight: bold;
              color: #222;
            }

            .poImg {
              position: absolute;
              right: 0;
              top: 0.2rem;
              width: 0.4rem;
              height: 0.4rem;
              background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
              background-size: 3rem 2.4rem;
            }
          }

          .xspPadnone {
            padding-right: 0.1rem;
          }
        }

        .jiangsu {
          height: 1.2rem;

          width: 6.3rem;

          .bb1 {
            color: #222222;
            font-size: 0.3rem;
            font-weight: bold;
            letter-spacing: 0.02rem;
          }

          .selectbox {
            .top1 {
              width: 100%;
              height: 0.6rem;
              text-align: right;
              font-size: 0.3rem;
              font-weight: bold;
            }

            .imgbox {
              text-align: center;
              display: inline-block;
              width: 1.6rem;
              height: 0.6rem;
              border: 1px solid #eee;
              border-radius: 0.1rem;
              line-height: 0.6rem;
              margin-right: 0.2rem;

              .sImg {
                display: inline-block;
                width: 0.2rem;
                height: 0.2rem;
              }

              i {
                font-size: 0.3rem;
                font-weight: bold;
              }
            }

            .top2 {
              .imgbox {
                border: none;
              }
            }
          }
        }
      }
    }
  }
}

.imgIcon {
  width: 0.4rem;
  height: 0.4rem;
}

.top3 {
  width: 100%;
  height: 1.2rem;
  padding: 0 0.3rem;
}

.top2 {
  flex: 1;
}

.btnGroup {
  // margin-top: 2.32rem;
  display: flex;
  justify-content: space-between;

  button {
    width: 3.35rem;
    height: 0.9rem;
    border-radius: 0.45rem;
    letter-spacing: 0.05rem;
    font-size: 0.36rem;
    font-weight: bold;
  }

  .reset {
    border: 1px solid #eee;
    background: #fff;
    color: #999;
  }

  .submit {
    border: none;
    background: @mainColor;
    color: #fff;
  }
}
</style>
